/**
 * Created by hejg on 2018/5/15.
 */
import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
} from 'react-native';
import PropTypes from 'prop-types';
import Style from '../../../../components/Style';

export default class HomeModuleFrame extends Component {
    render() {
        return (
            <View style={styles.moduleFrameView}>
                <HomeModuleTitle title={this.props.title}/>
                {this.props.children}
            </View>
        );
    }
}

HomeModuleFrame.propTypes = {
    title: PropTypes.string.isRequired,
    // type: PropTypes.string
};

class HomeModuleTitle extends Component {
    render() {
        return (
            <View style={styles.moduleTitleView}>
                <Text style={styles.moduleTitleLeft}>{this.props.title}</Text>
                {/*<Text style={styles.moduleTitleRight}>...</Text>*/}
            </View>
        );
    }
}


const styles = StyleSheet.create({
    moduleFrameView: {
        // borderRadius: 5,
        borderWidth: 1,
        borderColor: Style.color.shadow,
        backgroundColor: Style.color.white,
        marginTop: 10
    },
    moduleTitleView: {
        borderColor: Style.color.lightGray,
        borderBottomWidth: 1,
        paddingHorizontal: 10,
        paddingVertical: 5,
        backgroundColor: Style.color.white,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    moduleTitleLeft: {
        fontWeight: 'bold',
        color: Style.color.black,
        fontSize: Style.fontSize.normal
    },
    moduleTitleRight: {
        fontWeight: 'bold',
        marginTop: -5,
        fontSize: Style.fontSize.normal
    }
});